// 车辆保养记录
<template>
  <div class="oilEnter-container">
    <van-nav-bar
      class="app-nav-bar"
      title="车辆保养记录"
      left-arrow
      @click-left="$router.back()"
    />
    <van-tabs v-model="activeName">
      <van-tab title="信息填写" name="a">
        <van-form class="form-box" @submit="onAddKeepInfo">
          <van-field
            readonly
            clickable
            name="calendar"
            :value="keepForm.engine_oil_date"
            label="换油日期"
            placeholder="点击选择换油日期"
            :rules="[{ required: true, message: '请填写换油日期' }]"
            @click="showCalendar = true"
          />
          <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            v-model="showCalendar"
            @confirm="onConfirm"
          />
          <van-field
            v-model="keepForm.car_number"
            type="text"
            readonly
            name="车牌号"
            label="车牌号"
            placeholder="请填写车牌号"
            @click="show = true"
          />
          <van-action-sheet cancel-text="取消" close-on-click-action v-model="show" :actions="actions" @select="onSelect" />
           <van-field
            v-model="keepForm.kilometers"
            type="number"
            name="公里数"
            label="公里数"
            placeholder="请填写公里数"
            :rules="[{ required: true, message: '请填写公里数' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <van-tab title="记录查询" name="b">
        <van-search
          v-model="searchCar"
          show-action
          placeholder="请输入要查询的车牌号"
          @search="onSearch(searchCar)"
        >
          <template #action>
            <div @click="onSearch(searchCar)">搜索</div>
          </template>
        </van-search>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <el-table :data="list" border style="width: auto">
              <el-table-column prop="engine_oil_date" label="日期">
                <template slot-scope="scope">
                  <!-- 加上点击事件 -->
                  <span
                    style="cursor: pointer; color: rgb(64, 158, 255)"
                    @click="gotoInfo(scope)"
                    >{{ scope.row[scope.column.property] }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column prop="car_number" label="车牌号">
              </el-table-column>
              <el-table-column prop="kilometers" label="公里数"> </el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <el-button
                  type="primary" icon="el-icon-edit" circle
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"></el-button>
                  <el-button
                  round
                    size="mini"
                    type="danger" icon="el-icon-delete" circle
                    @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { addKeepForm, getKeepForm, destroy } from '@/api/carKeep'
export default {
  name: 'carKeepIndex',
  components: {},
  props: {},
  data () {
    return {
      activeName: 'a',
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2035, 0, 31),
      keepForm: {
        engine_oil_date: null,
        time_stamp: null,
        kilometers: null,
        car_number: null
      },
      actions: [{ name: '冀ADJ656' }, { name: '冀A9638W' }, { name: '冀A758AF' }, { name: '冀AL7806' }, { name: '冀AFV191' }, { name: '冀A644P2' }, { name: '冀A7Z939' }, { name: '冀A976WU' }, { name: '冀A483G3' }, { name: '冀AKN117' }, { name: '冀AU8537' }, { name: '冀ABD571' }, { name: '冀AKF385' }, { name: '冀A35Q54' }, { name: '冀A5285C' }, { name: '冀A8U871' }, { name: '冀A54U11' }, { name: '冀A589AM' }, { name: '冀A552AM' }, { name: '冀A247CF' }, { name: '冀A79D74' }, { name: '冀ABM247' }, { name: '冀AXJ901' }, { name: '冀A8189V' }, { name: '冀A477G3' }, { name: '冀A8535V' }, { name: '冀A8608Z' }, { name: '冀AKX857' }, { name: '冀ALB477' }],
      showCalendar: false,
      list: [],
      gotoList: [],
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      searchCar: ''
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    getInfo () {
      getKeepForm().then(res => {
        console.log('获取信息', res)
        this.list = res.data.data
        this.refreshing = false
        this.finished = true
      })
    },
    onAddKeepInfo (values) {
      // console.log('submit', values)
      // console.log('keepForm', this.keepForm)
      addKeepForm(this.keepForm).then(res => {
        console.log('填写信息', res)
        if (res.data.errno === 1000) {
          this.$toast.success('提交成功')
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        }
      }).catch((err) => {
        console.log('addOilInfo err', err)
        this.$toast.fail('提交失败')
      })
    },
    onConfirm (date) {
      console.log('日期', new Date(date))
      console.log('时间戳', new Date(date).getTime())
      this.keepForm.engine_oil_date = `${date.getYear() + 1900}/${
        date.getMonth() + 1
      }/${date.getDate()}`
      this.keepForm.time_stamp = new Date(date).getTime()
      this.showCalendar = false
    },
    onLoad () {
      this.getInfo()
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      this.searchCar = ''

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onSelect (item) { // 内部车辆选择器
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // console.log(item)
      this.keepForm.car_number = item.name
      this.show = false
      // Toast(item.name)
    },
    onSearch (val) {
      this.list = []
      console.log(val)
      getKeepForm({
        car_number: val
      }).then(res => {
        console.log('获取信息', res)
        this.list = res.data.data
      })
    },
    gotoInfo (v) {
      console.log(v)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$dialog.confirm({
        title: '警告',
        message: '确认要删除吗'
      })
        .then(() => {
          // on confirm
          destroy({
            id: row._id
          }).then(res => {
            console.log('res', res)
            this.$toast.success('删除成功')
            setTimeout(() => {
              window.location.reload()
            }, 1000)
            // this.getInfo()
          }).catch(err => {
            console.log('err', err)
            this.$toast.fail('删除失败')
            // window.location.reload()
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss">
// .cell-box {
//   padding: 0 10px;
// }
.form-box {
  padding: 0 10px;
}
.van-cell {
  border-radius: 10px;
  margin: 16px 0;
  // background-color: rgba(102, 137, 253, 0.9);
  height: 45px;
}
.tab_field {
  padding: 0 10px;
}
// .van-button--normal {
//     padding: 0 0.4rem;
//     font-size: 0.37333rem;
//     border-radius: 10px;
// }
.field-btn {
  border-radius: 10px;
  background-color: rgba(25, 137, 250, 0.7);
}
.van-search .van-cell {
  border-radius: 0.26667rem;
  margin: 0;
  height: 34px;
}
</style>
